<template lang="pug">
    div(class="batman-mask-layer", @click="on_mask_click", v-show="visible", ref="mask_layer")
      div(@click.stop)
        slot
</template>

<script>
export default {
  name: "batman-mask",
  data() {
    return {
      mask_layer_name: "batman-mask-layer"
    };
  },
  props: {
    /**
     * 控制遮罩层的可见状态
     */
    visible: { type: Boolean, default: false },
    /**
     * 自定义类名
     */
    "i-class": { type: String, default: "" },

    /**
     * 是否点击遮罩关闭遮罩
     */
    "click-mask-close": { type: Boolean, default: true }
  },
  watch: {
    visible(val) {
      const method = val ? this.mask_layer_show : this.mask_layer_close;
      method();
    }
  },
  computed: {
    /** 创建content类名 */
    content_layer_class_list() {
      let result = { "batman-mask-content-layer": true };
      if (this.iClass) result[this.iClass] = true;
      return result;
    }
  },
  methods: {
    /** 往body里添加遮罩层 */
    mask_layer_show() {
      if (this.iClass) this.$refs.mask_layer.classList.add(this.iClass);
      document.body.style.overflow = "hidden"; // 屏蔽滚动条
      this.$emit("on-mask-show");
    },
    /** 响应遮罩层点击事件 */
    on_mask_click() {
      // if (this.clickMaskClose) this.mask_layer_close();
      if (this.clickMaskClose) this.$emit("update:visible", false);
    },
    /** 关闭遮罩层 */
    mask_layer_close() {
      document.body.style.overflow = ""; // 不屏蔽滚动条
      this.$emit("on-mask-close");
    }
  }
};
</script>

<style lang="less" scoped>
.batman-mask-layer {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);

  position: fixed;
  top: 0;
  left: 0;
}
</style>
